<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList">搜索</el-button>
				<el-button type="text" @click="importHandle">导出excel</el-button>
			</div>
			<el-form-item label="查询时间" prop="time">
				<el-date-picker v-model="timeModel" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="订单状态">
				<el-select size="small" v-model="queryParams.orderState" multiple placeholder="请选择状态" filterable
					clearable @change="changClass">
					<el-option v-for="item in stateList" :key="item.id" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="供应商">
				<el-select size="small" v-model="queryParams.supplierId" multiple placeholder="请选择供应商" filterable
					clearable>
					<el-option v-for="item in supplierList" :key="item.id" :label="item.supplierName"
						:value="item.supplierId">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="开票单位">
				<el-select size="small" v-model="queryParams.unitName" multiple placeholder="请选择开票单位" filterable
					clearable>
					<el-option v-for="item in unitNameList" :key="item.id" :label="item.unitName"
						:value="item.unitName">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="订单号">
				<el-input v-model="queryParams.orderNo" placeholder="订单号" clearable size="small"
					@keyup.enter.native="getList" />
			</el-form-item>
		</el-form>

		<el-table v-loading="loading" :data="list" border :cell-style="{padding: '17px 0px'}"
			height="calc(100vh - 390px)">
			<el-table-column label="订单号" align="center" prop="orderNo"></el-table-column>
			<el-table-column label="子订单号" align="center" prop="orderZiNo" width="280"></el-table-column>
			<el-table-column label="sku" align="center" prop="sku"></el-table-column>
			<el-table-column label="订单名称" align="center" prop="orderName" width="200"></el-table-column>
			<el-table-column label="购买数量" align="center" prop="buyNum"></el-table-column>
			<el-table-column label="未税单价" align="center" prop="excludeTaxPrice"></el-table-column>
			<el-table-column label="未税总价" align="center" prop="sumExcludeTaxPrice"></el-table-column>
			<el-table-column label="含税单价" align="center" prop="price"></el-table-column>
			<el-table-column label="含税总价" align="center" prop="budget"></el-table-column>
			<el-table-column label="下单人" align="center" prop="name"></el-table-column>
			<el-table-column label="订单状态" align="center" prop="optional1"></el-table-column>
			<el-table-column label="创建时间" align="center" prop="createTime" width="93"></el-table-column>
			<el-table-column label="开票单位" align="center" prop="unitN" width="280"></el-table-column>
			<el-table-column label="供应商" align="center" prop="supplierName" width="280"></el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
	</div>
</template>

<script>
	import {
		businessorderCount,
		orderDetailNumhzr,
		orderNumhzr,
		getExport,
		supplierList,
		getUnitNameList,
		ExportBusinesslineOrder
	} from "@/api/leader/leaderapi";
	export default {
		name: "businesslineBG",
		// 页面数据
		data() {
			return {
				queryParams: {
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					beginTime: "",
					endTime: "",
					orderState: "",
					supplierId: "",
					orderNo: "",
					unitName: []
				},
				loading: false,
				stateList: [{
					value: "A1003",
					label: "提交订单"
				}, {
					value: "A1102",
					label: "已完成"
				}, {
					value: "A1101",
					label: "等待收货"
				}, {
					value: "A1002",
					label: "预占订单"
				}],
				mergerItems: [{
						columnIndex: 0,
						spanArr: [],
						pos: 0,
						prop: 'orderNo'
					},
					{
						columnIndex: 1,
						spanArr: [],
						pos: 0,
						prop: 'orderZiNo'
					},
					{
						columnIndex: 2,
						spanArr: [],
						pos: 0,
						prop: 'orderName'
					}
				],
				supplierList: [],
				unitNameList: [],
				orderDetail: {},
				countOrderNo: '',
				list: [],
				total: 0, // 一共多少条数据
				timeModel: [],
				orderCountOutList: []
			};
		},
		// 初始化
		mounted() {
			this.getList();
			this.getSupplierList();
			this.getUnitNameList();

			console.log('92', this.goodsClassList)
		},
		// 函数集合
		methods: {
			cellMerge({
				row,
				column,
				rowIndex,
				columnIndex
			}) { //表格合并的方法
				if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) { //这里判断第几列需要合并
					let item = this.mergerItems.find(item => item.columnIndex === columnIndex)
					const _row = item.spanArr[rowIndex];
					const _col = _row > 0 ? 1 : 0;
					return {
						rowspan: _row,
						colspan: _col,
					}
				}
			},
			getSpanArr(data, array) { //循环数据处理
				for (let n = 0; n < array.length; n++) {
					array[n].spanArr = [] //数据清空(重新调此方法的时候需要清空上一次的数据)
					for (let i = 0; i < data.length; i++) {
						if (i === 0) {
							array[n].spanArr.push(1);
							array[n].pos = 0;
						} else {
							// 判断当前元素与上一个元素是否相同
							if (data[i][array[n].prop] === data[i - 1][array[n].prop]) {
								array[n].spanArr[array[n].pos] += 1;
								array[n].spanArr.push(0);
							} else {
								array[n].spanArr.push(1);
								array[n].pos = i;
							}
						}
					}
				}
			},
			//初始化列表
			getList() {
				this.loading = true;
				//传入订单详情和分页数据
				this.queryParams.beginTime = this.timeModel[0]
				this.queryParams.endTime = this.timeModel[1]
				let params = {
					pageNum: this.queryParams.pageNum,
					value: '办公用品',
					pageSize: this.queryParams.pageSize,
					beginTime: this.queryParams.beginTime,
					endTime: this.queryParams.endTime,
					orderState: this.queryParams.orderState,
					supplierId: this.queryParams.supplierId,
					orderNo: this.queryParams.orderNo,
					unitName: this.queryParams.unitName
				}

				console.log('111', this.timeModel)
				businessorderCount(params).then(res => {
					this.list = res.rows
					this.total = res.total
					this.getSpanArr(this.list, this.mergerItems)
					this.loading = false;
				})
				// orderDetailNum(params).then(res => {
				// 	this.orderDetail = res[0]
				// })
				// orderNum(params).then(res => {
				// 	this.countOrderNo = res[0]
				// })
			},
			//获取供应商列表
			getSupplierList() {
				debugger
				supplierList().then(res => {
					this.supplierList = res
				})
			},
			//获取开票单位列表
			getUnitNameList() {
				getUnitNameList().then(res => {
					this.unitNameList = res
				})
			},
			// 保存下载文件
			saveAs(blob, filename) {
				if (window.navigator.msSaveOrOpenBlob) {
					navigator.msSaveBlob(blob, filename)
				} else {
					const link = document.createElement('a')
					const body = document.querySelector('body')
					link.href = window.URL.createObjectURL(blob)
					link.download = filename
					link.style.display = 'none'
					body.appendChild(link)
					link.click()
					body.removeChild(link)
					window.URL.revokeObjectURL(link.href)
				}
			},
			// 导出订单
			importHandle() {
				//传入订单详情和分页数据
				this.queryParams.beginTime = this.timeModel[0]
				this.queryParams.endTime = this.timeModel[1]
				let params = {
					pageNum: this.queryParams.pageNum,
					value: '办公用品',
					pageSize: this.queryParams.pageSize,
					beginTime: this.queryParams.beginTime,
					endTime: this.queryParams.endTime,
					orderState: this.queryParams.orderState,
					supplierId: this.queryParams.supplierId,
					orderNo: this.queryParams.orderNo,
					unitName: this.queryParams.unitName
				}
				ExportBusinesslineOrder(params).then((res) => {
					let blob = new Blob([res], {
						type: 'application/vnd.ms-excel'
					})
					this.saveAs(blob, '订单统计.xls')
				})
			},
			changClass() {
				console.log(this.queryParams.orderState)
			},

		}
	}
</script>

<style>
	/* 	.el-col {
		font-size: 14px;
		margin: 10px 0px;

	} */

	.grid-content {
		/* border: 1px solid #dfe6ec; */
		padding: 0.25em 1.5em;
		/* margin-right: 0px !important; */
		margin-bottom: 0px !important;
	}

	.el-table-column {
		padding: 16px 0px;
	}
</style>
